<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    前端上传一个MP4文件，后端生成gif和jpg
    当前端点击的上传按钮，就提示上传成功。
    当后端把gif和jpg生成成功以后，推送给前端数据。
    前端接收到后端推送的数据，显示“视频预览与视频封面生成完毕”。
    进而可以展示视频预览和视频封面。
    -->
    <h2>上传视频</h2>
<!--    <form action="/qf/file/mp4ForGifAndJpg" method="post" enctype="multipart/form-data" >-->
        <input id="file" type="file" name="file"/>
<!--        <input type="submit"/>-->
        <button onclick="uploadFile();">上传</button>
    <br>
    <div id="mouseDiv">
    <video id="video" controls="controls" style="border-style: solid;border-color: #000000;border-width: 1px;width:200px;height:270px"></video>
    <img id="img" style="position:relative; left:-207px; border-style: solid;border-color: #000000;border-width: 1px;width:200px;height:270px"/>


    </div>
    <!--    </form>-->
    <script type="text/javascript">
        function uploadFile() {
            // 获取文件对象
            let fileObj = document.getElementById("file").files[0];
            // 接收上传文件的后台地址
            let fileControllerUrl = "/qf/file/mp4ForGifAndJpg";

            // FormData 对象
            let form = new FormData();

            // 文件对象
            form.append("file", fileObj);

            // XMLHttpRequest 对象
            let xmlhttp = new XMLHttpRequest();
            xmlhttp.open("post", fileControllerUrl, true);
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    let r=JSON.parse(xmlhttp.responseText);
                    if(r.code==200){
                        //document.getElementById("video").src=r.result.url;
                        setTimeout("search(\""+r.result.url+"\")",3000);
                    }
                }
            };
            xmlhttp.send(form);
        }

        let videoUrl_1=null;
        let jpgUrl=null;
        let gifUrl=null;

        /**
         * 双接口情况下，查询gif与jpg生成情况的方法
         */
        function search(videoUrl){
            // XMLHttpRequest 对象
            let xmlhttp = new XMLHttpRequest();
            let json={};
            json.url=videoUrl;
            xmlhttp.open("post", "/qf/file/search", true);
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    let r=JSON.parse(xmlhttp.responseText);
                    if(r.code==200){
                        let state=r.result.state;
                        if(state==1){
                            //完成了
                            videoUrl_1=r.result.videoUrl;
                            jpgUrl=r.result.jpgUrl;
                            gifUrl=r.result.gifUrl;
                            //获取到三个url
                            document.getElementById("video").src=videoUrl;
                            document.getElementById("img").src=jpgUrl;
                        }else{
                            //没完成
                            setTimeout("search(\""+videoUrl+"\")",3000);
                        }
                    }
                }
            };
            xmlhttp.setRequestHeader("Content-Type","application/json")
            xmlhttp.send(JSON.stringify(json));
        }
    </script>


    <script>
        let mouseDiv=document.getElementById("mouseDiv");
        let video=document.getElementById("video");
        let img=document.getElementById("img");
        //注册鼠标经过时事件处理函数
        img.onmouseover = function(){
            if(gifUrl!=null){
            img.src=gifUrl;
            }
        };
        //注册鼠标移开时事件处理函数
        img.onmouseout = function(){
            if(jpgUrl!=null){
                img.src=jpgUrl;
            }
        };

        //注册鼠标单击时事件处理函数
        img.onclick = function(){
            if(videoUrl_1!=null){
                //img得消失
                img.style.display="none";
                video.play();
            }
        };


    </script>


</body>
</html>